﻿
@{
    Layout = null;
}


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SetUserPage</title>
    <script src="/js/script/jquery-3.2.1.js"></script>
    <link href="/lib/layui/css/layui.css?2020/8/20 8:38:40" rel="stylesheet" />
    <link href="/css/layui-custom.css?2020/8/20 8:38:40" rel="stylesheet" />
    <script src="/js/script/default.js?2020/8/20 8:38:40"></script>

    <script src="/js/script/custom.form.dropdownlist.js"></script>
    <script src="/js/script/custom.form.fill.js"></script>
    <script src="/js/permission.js?2020/8/20 8:38:40"></script>
    <script src="/js/script/jquery.cookie.js"></script>

</head>

<body>
    <script src="/lib/layui/layui.js"></script>
    <script src="/js/script/treeselect.js?2020/8/20 8:38:40"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
        <script src="~/lib/layui/html5.min.js"></script>
        <script src="~/lib/layui/respond.min.js"></script>
    <![endif]-->



    <div class="layui-form">
        <div class="layui-container" style="width:820px">
            <div class="layui-row">
                <div class="layui-col-xs5">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>待分配用户</legend>
                    </fieldset>
                    <div class="layui-row">
                        <div class="layui-col-xs3">
                            <label>用户姓名:</label>
                        </div>
                        <div class="layui-col-xs7">
                            <input type="text" class="layui-input-row" id="txtLeftSearch" />
                        </div>
                        <div class="layui-col-xs2">
                            <button class="layui-btn layui-btn-xs" lay-filter="searchLeft" onclick="searchLeft()"><i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </div>
                    <div class="layui-row" style="height: 10px;">
                    </div>
                    <div class="layui-row" style="border: 1px solid #C2C3C9; height: 300px;" id="leftContain">
                        <div id="xtreeLeft" class="xtree_contianer"></div>
                    </div>
                </div>

                <div class="layui-col-xs2">
                    <div class="layui-row" style="height: 170px;">
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs12 layui-align-center">
                            <button class="layui-btn" onclick="toRight()"><i class="layui-icon" lay-filter="toRight">&#xe602;</i></button>
                        </div>
                    </div>
                    <div class="layui-row" style="height: 80px;">
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs12 layui-align-center">
                            <button class="layui-btn" onclick="toLeft()"><i class="layui-icon" lay-filter="toLeft">&#xe603;</i></button>
                        </div>
                    </div>
                </div>

                <div class="layui-col-xs5">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>已分配用户</legend>
                    </fieldset>
                    <div class="layui-row">
                        <div class="layui-col-xs3">
                            <label>用户姓名:</label>
                        </div>
                        <div class="layui-col-xs7">
                            <input type="text" class="layui-input-row" id="txtRightSearch" />
                        </div>
                        <div class="layui-col-xs2">
                            <button class="layui-btn layui-btn-xs" lay-fiter="searchRight" onclick="searchRight()"><i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </div>
                    <div class="layui-row" style="height: 10px;">
                    </div>
                    <div class="layui-row" style="border: 1px solid #C2C3C9; height: 300px;">
                        <div id="xtreeRight" class="xtree_contianer"></div>
                    </div>
                </div>
            </div>

            <div class="layui-row" style="height: 10px;">
            </div>

            <div class="layui-row">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="margin-left:-30px;">操作集：</label>
                    <input type="checkbox" name="CheckAll" lay-skin="primary" lay-filter="opCkAll" title="全选">
                </div>
            </div>
            <div class="layui-row" style="border: 1px solid #C2C3C9;height:90px; overflow-y:scroll;">
                <div class="layui-form-item">
                    <div class="layui-input-block" id="divOperation" style="margin-left: 10px;">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block layui-align-right">
                    <button class="layui-btn" lay-submit="" lay-filter="save" onclick="save()">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </div>
    </div>
    <script src="/lib/layui/layui-xtree.js?2020/8/20 8:38:40"></script>
    <script type="text/javascript">
    var id = 'a8be6bdb-eeee-4c3b-aa60-1dd89aae123b';

    layui.use(['form','jquery'],
        function () {
            var form = layui.form;
            var $ = layui.jquery;

            var currentSelFeatureId = '';//当前勾选的用户节点Id

            //二维数组，存放用户对应的 操作集合
            var featureIds = new Array();
            var operates = new Array();
            var setOption = function (checkbox) {
                if (checkbox.checked) {
                    currentSelFeatureId = $(checkbox).parent().attr("id");
                    //还原以前的选择的结果
                    var sumValue = getOpValue(currentSelFeatureId);
                    if (sumValue > 0) {
                        var checkboxs = $("#divOperation").find(":checkbox");
                        for (var i = 0; i < checkboxs.length; i++) {
                            var value = parseInt($(checkboxs[i]).val());
                            var result = Math.abs((sumValue & value));
                            var resultValue = 0;

                            if (result == 0) {//数字太大去服务端运算
                                $.ajax({
                                    url: "/Authorization/AppFeature/GetPosittionValue" + "?" + Math.random(),
                                    type: 'get',
                                    data: { "sumValue": sumValue, "checkValue": value },
                                    dataType: 'json',
                                    async: false,
                                    success: function (result) {
                                        resultValue = result.Data;
                                    },
                                    error: function (errorResult) {
                                        debugger;
                                    }
                                });

                            }
                            if (result == value || resultValue == value) {
                                $(checkboxs[i]).prop("checked", true);
                            } else {
                                $(checkboxs[i]).prop("checked", false);
                            }
                        }
                    } else {
                        var exited = false;
                        for (var i = 0; i < featureIds.length; i++) {
                            if (featureIds[i] == currentSelFeatureId) {
                                exited = true;
                                break;
                            }
                        }
                        if (!exited) {
                            featureIds.push(currentSelFeatureId);
                            operates.push(0);
                        }
                        $("#divOperation").find(":checkbox").prop("checked", false);
                    }
                } else {
                    currentSelFeatureId = '';
                    //移除选择的结果
                    $("#divOperation").find(":checkbox").prop("checked", false);
                }

                //从新渲染
                layui.form.render();
            }

            //3、最完整的参数用法
            var xtreeLeft = new layuiXtree({
                elem: 'xtreeLeft'                  //必填三兄弟之老大
                , form: form                    //必填三兄弟之这才是真老大
                , data: "/Authorization/AppFeature/GetToSetUserList?id=" + id + "&pt=" + Math.random() //必填三兄弟之这也算是老大
                , isopen: true  //加载完毕后的展开状态，默认值：true
                , ckall: true    //启用全选功能，默认值：false
                , ckallback: function () { } //全选框状态改变后执行的回调函数
                , icon: {        //三种图标样式，更改几个都可以，用的是layui的图标
                    open: "&#xe7a0;"       //节点打开的图标
                    , close: "&#xe622;"    //节点关闭的图标
                    , end: "&#xe612;"      //末尾节点的图标
                }
                , color: {       //三种图标颜色，独立配色，更改几个都可以
                    open: "#EE9A00"        //节点图标打开的颜色
                    , close: "#EEC591"     //节点图标关闭的颜色
                    , end: "#828282"       //末级节点图标的颜色
                }
                , click: function (data) {  //节点选中状态改变事件监听，全选框有自己的监听事件
                    //console.log(data.elem); //得到checkbox原始DOM对象
                    //console.log(data.elem.checked); //开关是否开启，true或者false
                    //console.log(data.value); //开关value值，也可以通过data.elem.value得到
                    //console.log(data.othis); //得到美化后的DOM对象
                    setOption(data.elem);
                    isChcekAll();
                    form.render("checkbox");

                }
            });

            //是否全部选中
            function isChcekAll() {
                var checkboxlist = $("#divOperation").find(":checkbox"); //操作集所有checkbox
                var checkd = $("#divOperation").find(":checkbox:checked");//操作集选中的checkbox
                if (checkboxlist.size() > 0) { //判断初始化是否全选
                    if (checkboxlist.size() == checkd.size()) {
                        $('input:checkbox[name=CheckAll]').prop("checked", true);
                    }
                    else {

                        $('input:checkbox[name=CheckAll]').prop("checked", false);
                    }
                }
            }

            var xtreeRight = new layuiXtree({
                elem: 'xtreeRight'                  //必填三兄弟之老大
                , form: form                    //必填三兄弟之这才是真老大
                , data: "/Authorization/AppFeature/GetSetedUserList?id=" + id + "&pt=" + Math.random() //必填三兄弟之这也算是老大
                , isopen: false  //加载完毕后的展开状态，默认值：true
                , ckall: true    //启用全选功能，默认值：false
                , ckallback: function () { } //全选框状态改变后执行的回调函数
                , icon: {        //三种图标样式，更改几个都可以，用的是layui的图标
                    open: "&#xe7a0;"       //节点打开的图标
                    , close: "&#xe622;"    //节点关闭的图标
                    , end: "&#xe612;"      //末尾节点的图标
                }
                , color: {       //三种图标颜色，独立配色，更改几个都可以
                    open: "#EE9A00"        //节点图标打开的颜色
                    , close: "#EEC591"     //节点图标关闭的颜色
                    , end: "#828282"       //末级节点图标的颜色
                }
                , click: function (data) {  //节点选中状态改变事件监听，全选框有自己的监听事件
                    //console.log(data.elem); //得到checkbox原始DOM对象
                    //console.log(data.elem.checked); //开关是否开启，true或者false
                    //console.log(data.value); //开关value值，也可以通过data.elem.value得到
                    //console.log(data.othis); //得到美化后的DOM对象
                    setOption(data.elem);
                    isChcekAll();
                    form.render("checkbox");
                },
                finished: function (d) {
                    for (var i = 0; i < d.length; i++) {
                        featureIds.push(d[i].value);
                        operates.push(d[i].operationValue);

                    }
                }

            });


            var toNormal =function(div) {
                div.find("span").removeClass("xtree_searchText");
            }

            //左边搜索 待选择用户
            window.searchLeft = function () {
                var container = $('#xtreeLeft');
                toNormal(container);
                var firstSpan = null;
                var spans = $("#xtreeLeft").find("span");
                var searchText = $("#txtLeftSearch").val().toLowerCase();
                //选中变红
                for (var i = 0; i < spans.length; i++) {
                    if ($(spans[i]).html().toLowerCase().indexOf(searchText) > -1) {
                        $(spans[i]).addClass("xtree_searchText");
                        if (!firstSpan) {
                            firstSpan = spans[i];
                        }
                    }
                }
                //滚动条滚动
                if (firstSpan) {
                    $("#xtreeLeft").scrollTop($(firstSpan).parent().parent().offset().top - container.offset().top + container.scrollTop());
                }
            }

            //右边搜索 已选择用户
            window.searchRight =function() {
                var container = $('#xtreeRight');
                toNormal(container);
                var firstSpan = null;
                var spans = $("#xtreeRight").find("span");
                var searchText = $("#txtRightSearch").val().toLowerCase();
                //选中变红
                for (var i = 0; i < spans.length; i++) {
                    if ($(spans[i]).html().toLowerCase().indexOf(searchText) > -1) {
                        $(spans[i]).addClass("xtree_searchText");
                        if (!firstSpan) {
                            firstSpan = spans[i];
                        }
                    }
                }
                //滚动条滚动
                if (firstSpan) {
                    $("#xtreeRight").scrollTop($(firstSpan).parent().parent().offset().top - container.offset().top + container.scrollTop());
                }
            }

            //分配用户
            window.toRight = function () {
                var oCks = xtreeLeft.GetChecked(); //这是方法

                for (var i = 0; i < oCks.length; i++) {
                    toNormal($(oCks[i]).parent());
                    $(oCks[i]).parent().attr("style", "margin: 5px 0px 0px 10px; display: block;");
                    $("#xtreeRight").append($(oCks[i]).parent());
                }

            }

            ////移除用户
            //window.toLeft =function() {
            //    var oCks = xtreeRight.GetChecked(); //这是方法
            //    var allItem = $("#xtreeLeft").find(".layui-xtree-item");
            //    for (var i = 0; i < oCks.length; i++) {
            //        var parentId = $(oCks[i]).parent().attr("parentId");
            //        var parent = allItem.find('#' + parentId);
            //        $(oCks[i]).parent().attr("style", "margin: 5px 0px 0px 45px; display: block;");
            //        parent.append($(oCks[i]).parent());
            //    }
            //}



            //移除用户
            window.toLeft = function () {
                var oCks = xtreeRight.GetChecked(); //这是方法
                var allItem = $("#xtreeLeft").find(".layui-xtree-item");
                for (var i = 0; i < oCks.length; i++) {
                    var parentId = $(oCks[i]).parent().attr("parentId");
                    if (parentId == 'null' || parentId == '') { //没有部门机构
                        //$(oCks[i]).parent().attr("style", "margin: 5px 0px 0px 45px; display: block;");
                        ($(oCks[i]).parent()).appendTo($("#xtreeLeft"));
                    }
                    else {
                        for (var j = 0; j < allItem.length; j++) {
                            var id = $(allItem[j]).prop('id');
                            if (id == parentId) {
                                $(oCks[i]).parent().attr("style", "margin: 5px 0px 0px 45px; display: block;");
                                $(allItem[j]).append($(oCks[i]).parent());
                            }
                        }
                    }
                }
            }

            window.save = function () {

                var selectValues = new Array();
                var oCks = $("#xtreeRight").find(":checkbox");
                //去掉第一个全选checkbox
                for (var i = 1; i < oCks.length; i++) {
                    selectValues.push(oCks[i].value);
                }
                var allSelUsers = new Array();
                var allOpertions = new Array();
                for (var i = 0; i < selectValues.length; i++) {
                    for (var j = 0; j < featureIds.length; j++) {
                        if (featureIds[j] == selectValues[i]) {
                            allSelUsers.push(featureIds[j]);
                            allOpertions.push(operates[j]);
                            break;
                        }
                    }
                }

                $.ajax({
                    url: "/Authorization/AppFeature/SaveFeatureUser" + "?pt=" + Math.random(),
                    type: "post",
                    data: { id: id, userList: allSelUsers, operationList: allOpertions  },
                    dataType: 'json',
                    success: function (result) {
                        if (dealResult(result)) {
                            parent.closeiframe("保存成功！");
                        }
                    }
                });


            }


            //初始化操作集
            var initOperation = function () {
                $.ajax({
                    url: "/Authorization/AppFeature/GetFeatureOperation?id=" + id + "&pt=" + Math.random(),
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        if (data.Success) {
                            var replaceStr = '<input type="checkbox" idValue="{idValue}" lay-filter="opCk" lay-skin="primary" value="{value}" title="{title}">';
                            var result = '';
                            for (var i = 0; i < data.Data.length; i++) {
                                var str = replaceStr.replace("{idValue}", data.Data[i].Id).replace("{value}", data.Data[i].Value)
                                    .replace("{title}", data.Data[i].Name);
                                result += str;
                            }

                            $("#divOperation").html(result);
                            form.render();

                        }
                    }
                });
            }


            form.on('checkbox(opCk)', function (data) {

                var value = $(this).val();

                if (this.checked) {
                    setAddOpValue(currentSelFeatureId, value);
                } else {
                    setRemoveOpValue(currentSelFeatureId, value);
                }
                isChcekAll();
                form.render("checkbox");
            });
            form.on('checkbox(opCkAll)', function (data) {
                if (this.checked) {
                    $("#divOperation").find(":checkbox").prop("checked", true);
                    setAddAll(currentSelFeatureId);
                }
                else {
                    $("#divOperation").find(":checkbox").prop("checked", false);
                    setRemoveAll(currentSelFeatureId);
                }

                form.render("checkbox");
            });


            initOperation();

            //取操作值
            window.getOpValue=function(id) {
                for (var i = 0; i < featureIds.length; i++) {
                    if (featureIds[i] == id) {
                        return operates[i];
                    }
                }
                return 0;
            }
            //添加操作值
            window.setAddOpValue = function (id, value) {
                if (id == '')
                    return;
                for (var i = 0; i < featureIds.length; i++) {
                    if (featureIds[i] == id) {
                        operates[i] = operates[i] + parseInt(value);
                        return;
                    }
                }
                featureIds.push(id);
                operates.push(parseInt(value));
            }
            //减去操作值
            window.setRemoveOpValue = function (id, value) {
                if (id == '')
                    return;
                for (var i = 0; i < featureIds.length; i++) {
                    if (featureIds[i] == id) {
                        operates[i] = operates[i] - parseInt(value);
                        return;
                    }
                }
            }
               //全选操作赋值
            window.setAddAll = function (id) {
                if (id == '')
                    return;
                var Checkcd = $("#divOperation").find(":checkbox");
                var value = 0;
                for (var i = 0; i < Checkcd.length; i++) {
                    value += parseInt($(Checkcd[i]).val());
                }
                for (var i = 0; i < featureIds.length; i++) {
                    if (featureIds[i] == id) {
                        operates[i] = value;
                    }
                }
            }
            //全不选操作赋值
            window.setRemoveAll = function (id) {
                if (id == '')
                    return;
                for (var i = 0; i < featureIds.length; i++) {
                    if (featureIds[i] == id) {
                        operates[i] = 0;
                        return;
                    }
                }
            }

            //初始化上次已经选择的用户





        });


    </script>

    <link href="/css/default.css?2020/8/20 8:38:40" rel="stylesheet" />
</body>
</html>

